<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>华为商城</title>
    <link rel=" icon" href="../images/logo/huawei.ico" />
    <link rel="stylesheet" href="../icon/font_index/iconfont.css">
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/shopingcart.css">
</head>

<body>
    <!-- 首页框架 -->
    <div class="react-root">
        <!-- ---------------------- -->
        <!-- 头部导航栏一 -->
        <div class="header-top-bg">
            <div class="header-top">
                <!-- 头部左导航 -->
                <div class="header-top-left">
                    <ul>
                        <li class="toindex"><a href="javascript:;">首页</a></li>
                        <li><a href="javascript:;">华为官网</a></li>
                        <li><a href="javascript:;">花粉俱乐部</a></li>
                        <li><a href="javascript:;">V码(优购码)</a></li>
                        <li><a href="javascript:;">企业购</a></li>
                        <li><a href="javascript:;">Select Region</a></li>
                        <li><a href="javascript:;">更多精彩</a></li>
                    </ul>
                </div>
                <!-- 头部左导航 -->
                <span class="header-top-right">
                    <div class="login-before">
                        <div class="toLogin sl">请登录</div>
                        <div class="toRegist padd">注册</div>
                    </div>
                    <div class="login-after">
                        <div class="welcome sl">岳贵超你好</div>
                        <div class="tuichu padd">退出</div>
                    </div>
                    <div>
                        <p>我的订单</p>
                    </div>
                    <div class="line">
                        <p>客服</p>
                        <ul>
                            <li style="width:48px;">服务中心</li>
                            <li>联系客服</li>
                        </ul>
                    </div>
                    <div class="line">
                        <p>网站导航</p>
                        <ul style="width:560px;" class="subnav">
                            <section>
                                <li>频道</li>
                                <li>华为专区</li>
                                <li>企业购</li>
                                <li>教育优惠</li>
                                <li>HarmonyOS</li>
                            </section>
                            <section>
                                <li>产品</li>
                                <li>手机</li>
                                <li>笔记本</li>
                                <li>平板</li>
                                <li>智能穿戴</li>
                                <li>智能家居</li>
                                <li>智慧屏</li>
                                <li>耳机音箱</li>
                                <li>热销配件</li>
                                <li>生态产品</li>
                                <li>增值服务</li>
                            </section>
                            <section>
                                <li>增值服务</li>
                                <li>以旧换新</li>
                                <li>补购保障</li>
                                <li>一口价换电池</li>
                                <li>音频延保</li>
                                <li>穿戴延保</li>
                                <li>智慧屏全质保</li>
                                <li>活动公告</li>
                            </section>
                        </ul>
                    </div>
                    <div class="line">
                        <p>手机版</p>
                        <ul>
                            <li><img src="../images/commodpage/app.jpg" /></li>
                            <li><img src="../images/commodpage/smallapp.jpg" /></li>
                        </ul>
                    </div>
                </span>
                <div class="shop-enter">
                    <div class="shoppinp-card">
                        <span class="iconfont icon-maijiagouwuche"></span>
                        <div style="font-size:12px;">&nbsp;&nbsp;购物车</div>
                    </div>
                </div>
            </div>
        </div>
        <!-- ---------------------- -->
        <!-- 头部导航栏二 -->
        <div class="header-buttom-bg">
            <div class="header-buttom">
                <div class="biaoti">
                    <h1><img src="../images/logo/logo_app.png"></h1>
                    <div class="text">我的购物车</div>
                </div>
                <div class="range"></div>
            </div>
        </div>
        <!-- ------------------------ -->
        <!-- 物品栏 -->
        <div class="car-list">
            <div class="car-title">
                <label for="check" class="xuanze">
                    <input type="checkbox" id="check">
                    <span style="margin-left: 10px;">全选</span>
                </label>
                <ul class="clearfix">
                    <li>商品</li>
                    <li>单价</li>
                    <li>数量</li>
                    <li>小计</1i>
                    <li>操作</li>
                </ul>
            </div>

            <div class="car-content">
                <ul class="noshopping">
                    <section class="toindex">购物车为空，请前往商城页</section>
                </ul>
                <main>
                    <!-- <ul>
                        <input type="checkbox" class="check">
                        <b class="shop-img"><img src="../images/shopingcart/1.npg"></b>
                        <p class="shop-name">HUAWEI P50 Pocket 12GB+512GB 鎏光金</p>
                        <div class="price">￥ 1099.00</div>
                        <div class="inpur-num">
                            <div class="minnum">-</div>
                            <input type="text" class="num" value="5">
                            <div class="addnum">+</div>
                        </div>
                        <div class="xiaoji">￥ 1099.00</div>
                        <div class="delshop">删除</div>
                    </ul> -->
                </main>
            </div>
        </div>
        <!-- 结算 -->
        <div class="cat-tool">
            <section>
                <div>
                    <span class="zongji">已选择&nbsp;<span class="zongji" id="count">**</span>&nbsp;件商品</span>
                </div>
                <div>
                    <span class="zongji">总计：</span>
                    <span class="zongji" id="money">**</span>
                </div>
            </section>
            <div class="account">立即结算</div>
        </div>
        <!-- ------------------------ -->
        <!-- 商品服务 -->
        <div class="pro-serve-bg">
            <div class="pro-serve">
                <div class="serve-cont">
                    <img width="24" height="24" src="../images/index/proserve1.png">
                    <div class="text">&nbsp;&nbsp;百强企业品质保证</div>
                </div>
                <div class="serve-cont">
                    <img width="24" height="24" src="../images/index/proserve2.png">
                    <div class="text">&nbsp;&nbsp;7天退货 15天换货</div>
                </div>
                <div class="serve-cont">
                    <img width="24" height="24" src="../images/index/proserve3.png">
                    <div class="text">&nbsp;&nbsp;48元起免运费</div>
                </div>
                <div class="serve-cont">
                    <img width="24" height="24" src="../images/index/proserve4.png">
                    <div class="text">&nbsp;&nbsp;2000家服务店 全国联保</div>
                </div>
            </div>
        </div>

        <!-- ---------------------- -->
        <!-- 底部导航信息 -->
        <div class="footer-bg">
            <div class="footer-nav">
                <div class="left-nav">
                    <dl>
                        <dt>购物指南</dt>
                        <dd>免息分期</dd>
                        <dd>以旧换新</dd>
                        <dd>众测活动</dd>
                        <dd>企业购</dd>
                        <dd>O2O采购</dd>
                    </dl>
                    <dl>
                        <dt>售后服务</dt>
                        <dd>门店维修</dd>
                        <dd>保修政策</dd>
                        <dd>防伪查询</dd>
                        <dd>退换贷政策</dd>
                        <dd>手机寄修服务</dd>
                        <dd>维修备件价格查询</dd>
                    </dl>
                    <dl>
                        <dt>维修与技术支持</dt>
                        <dd>服务店</dd>
                        <dd>预约维修</dd>
                        <dd>手机寄修</dd>
                        <dd>备件价格查询</dd>
                        <dd>上门服务</dd>
                    </dl>
                    <dl>
                        <dt>特色服务</dt>
                        <dd>防伪查询</dd>
                        <dd>补购保障</dd>
                        <dd>以旧换新</dd>
                        <dd>礼品包装</dd>
                    </dl>
                    <dl>
                        <dt>关于我们</dt>
                        <dd>公司介绍</dd>
                        <dd>华为委售店</dd>
                        <dd>商家中心</dd>
                        <dd>意见反馈</dd>
                    </dl>
                    <dl>
                        <dt>友情链接&nbsp;></dt>
                        <dd>华为集团</dd>
                        <dd>华为CBG官网</dd>
                        <dd>花粉俱乐部</dd>
                        <dd>华为云</dd>
                        <dd>华为应用市场</dd>
                    </dl>
                </div>
                <div class="line-y"></div>
                <div class="right-phone">
                    <div class="phone">
                        <div class="phone-num">950805</div>
                        <div class="phone-txt">7 x 24小时客服热线(仅收市话费)
                        </div>
                    </div>
                    <div class="kefu">
                        <div class="box-phone">
                            <span class="iconfont icon-zaixiankefu"></span>
                            <div style="margin-left: 7px;">在线客服</div>
                        </div>
                    </div>
                    <div class="VMALL">
                        <h2 style="font-size: 13px;">关注VMALL:</h2>
                        <span style="font-size: 24px;" class="iconfont icon-weixin"></span>
                        <span style="font-size: 18px;" class="iconfont icon-toutiaoyangshi"></span>
                        <span style="font-size: 24px;" class="iconfont icon-weibo"></span>
                        <span style="font-size: 18px;" class="iconfont icon-baidu"></span>
                    </div>
                </div>
            </div>
        </div>

        <!-- ---------------------- -->
        <!-- 底部版权 -->
        <div class="copyright-bg">
            <div class="copyright">
                <div class="copy-content">
                    <div class="left">
                        <img width="82" height="20" src="../images/logo/logo_min.png">
                    </div>
                    <div class="center">
                        <div class="cen-1">
                            华为集团&nbsp;|&nbsp;华为CBG官网&nbsp;|&nbsp;花粉俱乐部&nbsp;|&nbsp;华为应用市场&nbsp;|&nbsp;HarmonyOS&nbsp;|&nbsp;华为终端云空间&nbsp;|&nbsp;开发者联盟&nbsp;|&nbsp;
                            华为商城手机版
                        </div>
                        <div class="cen-2">
                            <p>隐私声明服务协议COOKIES
                                Copyright◎2012-2022华为终端有限公司版权所有&nbsp;|&nbsp;经营资质&nbsp;|&nbsp;粤ICP备19015064号1粤公网安备44190002003939号
                            </p>
                            <p>增值电信业务经营许可证:粤B2-201907621 备案 主体编号: 442019190721821 粵新出网备 (2021) 2号1(粵)网械平台备字[2022]第00005号
                            </p>
                            <p>互联网药品信息服务资格证(粤) -非经营性: 2020-0102 &nbsp;|&nbsp;
                                粤东食药监械经营备20203930&nbsp;|&nbsp;广东省网络食品交易第三方平台备案: GDWS10168</p>
                        </div>
                    </div>
                    <div class="right"><img width="90" height="32" src="../images/index/yingyezhizhao.png"></div>
                </div>
            </div>
        </div>

        <!-- 侧边栏导航 -->
        <aside>
            <div class="aside shoppinp-card">
                <span class="iconfont icon-maijiagouwuche"></span>
                <h2>购物车</h2>
            </div>
            <div class="aside">
                <span class="iconfont icon-zaixiankefu"></span>
                <h2>在线客服</h2>
            </div>
            <div class="aside">
                <span class="iconfont icon-fuwu"></span>
                <h2>自助服务</h2>
            </div>
        </aside>
    </div>
</body>

</html>
<script src="../js/jquery.js"></script>
<script src="../js/tools.js"></script>
<script src="../js/shopingcart.js"></script>